<html>
<head>
    <title th:text="${person.name.first} + ' ' + ${person.name.last}"></title>
    <link rel="stylesheet" href="material-blue.css"/>
</head>
<body>

<div class="resume" id="material-blue">
  <div class="leftCol m_box">
      <div class="heading" id="myselfpic">
          <div class="title">
              <h2><span th:text="${person.name.first}"/> <span th:text="${person.name.last}"/></h2>
              <div th:text="${person.position}"></div>
          </div>
      </div>

      <div class="item">
          <div class="icon">
              <i class="fa fa-user"></i>
          </div>
          <div class="text">
              <ul>
                  <li>Born <span th:text="${person.birth.year}"/> in <span th:text="${person.birth.location}"/></li>
              </ul>
          </div>
      </div>

      <div class="item">
          <div class="icon">
              <i class="fa fa-location-arrow"></i>
          </div>
          <div class="text">
              <ul>
                  <li th:text="${person.contact.street}"></li>
                  <li th:text="${person.contact.city}"></li>
              </ul>
          </div>
      </div>
            <a th:href="'tel:' + ${person.contact.phone}">
                <div class="item">
                    <div class="icon">
                        <i class="fa fa-phone"></i>
                    </div>
                    <div class="text">
                        <h4 th:text="${person.contact.phone}"></h4>
                        <span>mobile</span>
                    </div>
                </div>
            </a>

      <a th:href="'mailto:' + ${person.contact.email}">
          <div class="item">
              <div class="icon">
                  <i class="fa fa-envelope"></i>
              </div>
              <div class="text">
                  <h4 th:text="${person.contact.email}"></h4>
                  <span>private</span>
              </div>
          </div>
      </a>

      <a th:href="'https://github.com/' + ${person.contact.github}" target="_blank">
          <div class="item">
              <div class="icon">
                  <i class="fa fa-github"></i>
              </div>
              <div class="text">
                  <h4 th:text="${person.contact.github}"></h4>
                  <span th:text="'https://github.com/' + ${person.contact.github}"></span>
              </div>
          </div>
      </a>

      <div class="item last">
          <div class="icon">
              <i class="fa fa-cogs"></i>
          </div>
          <div class="text">
              <h3 th:text="${lang.headings.skills}"></h3>
              <div style="width: 100%; height: 15px;"></div>
          </div>
              <div class="skill"  th:each="skill : ${person.skills}">
                  <div class="right">
                      <span th:text="${skill.name}"></span>
                      <div class="progress">
                          <div class="determinate" th:style="'width: '+ ${skill.level} + '%;'">
                              <i class="fa fa-circle"></i>
                          </div>
                      </div>
                  </div>
              </div>
      </div>
  </div>

  <div class="rightCol">

      <div class="block">
          <div class="icon">
              <i class="fa fa-suitcase"></i>
          </div>
          <div class="content">
              <h2 th:text="${lang.headings.experience}"></h2>
                  <div class="item" th:each="experience : ${person.experience}">
                      <h3><span th:text="${experience.position}"/> - <span th:text="${experience.company}"/></h3>
                      <span th:text="${experience.timeperiod}"></span>
                      <p th:text="${experience.description}"></p>
                  </div>
          </div>
      </div>

      <div class="block">
          <div class="icon">
              <i class="fa fa-graduation-cap"></i>
          </div>
          <div class="content">
              <h2 th:text="${lang.headings.education}"></h2>

                  <div class="item" th:each="education : ${person.education}">
                      <h3 th:text="${education.degree}"></h3>
                      <span th:text="${education.timeperiod}"></span>
                      <p th:text="${education.description}"></p>
                  </div>
          </div>
      </div>
  </div>
  <div style="clear:both;"></div>
</div>




</body>
</html>
